<template>
	<view>
		<view class="c-scan-input-box" v-show="isEdit">
			<view ref="cScanInput" class="c-scan-input" :class="cScanInputH"><input class="uni-input" :focus="isEdit" v-model="value" placeholder="请输入需要添加的码" /></view>

			<view class="c-t-c">
				<button class="c-scan-btn c-scan-btn-gray" type="default" @click="switchScan">切换扫描</button>
				<button class="c-scan-btn c-scan-btn-orange" type="default" :disabled="!value ? true : false" @click="handleConfirm">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			 isEdit:true,
			targetObj:'',
			value:'',
			cScanInputH:'',
			barcode:{},
			flashLampObj:null,
			isFlash:false
		};
	},
	onShow() {
		// 页面展示时，重新启动扫描检测
		// if (this.barcode) {
		// 	this.barcode.start();
		// }
	},
	onLoad(opt) {
	            // var data = opt ? JSON.parse(opt.scan) : {}; 
	            // this.targetObj = data;
	            // console.log('打开了',opt,data)
	        },
	 mounted(){
		this.scan();
		setTimeout(()=>{
			this.flashLamp();
			this.manualInput();
			this.localAlbum();
			this.scanTitle();
		},500)
	},
	destroyed(){
		this.closeView()
	},
	methods: {
              scan(){
                        var pages = getCurrentPages();
                        var page = pages[pages.length - 1];
                        // #ifdef APP-PLUS
                        var currentWebview = page.$getAppWebview(); //页面栈最顶层就是当前webview
                        // #endif

                        // 创建扫描码
                        var barcode = plus.barcode.create('barcode', [plus.barcode.CODE128, plus.barcode.QR], {
                            top:'0px',
                            left:'0',
                            width: '100%',
                            height: '100%',
                            position: 'static',
                            background:'#794fc4',
                            frameColor:'#794fc4',
                            scanbarColor:'#794fc4'
                        });


                        // 成功
                        barcode.onmarked = (type,result)=>{
                            // uni.showToast({
                            //     title: "("+type+")"+result ,
                            //     icon: "none"
                            // })

                            this.returnValue(type,result)

                        };

                        // 失败
                        barcode.onerror = (error)=>{
                            uni.showToast({
                                title: error ,
                                icon: "none"
                            })

                            // barcode.start();
                        };

                        this.barcode = barcode;
                        currentWebview.append(barcode);
                        barcode.start();
                    },

                    // 扫一扫title
                    scanTitle(){
                            var view = new plus.nativeObj.View('scanTitle',{top:'20px',left:'40px',height:'36px',width:'100%'});
                            view.drawText('扫一扫', {left:'-40px'}, {size:'16px',color:'#ffffff',align:'center'});
                            view.show();
                    },

                    // 手电筒
                    flashLamp(){
                        var that = this;
                        var view;
                        function _Create(flag){
                            var flashLamp = plus.nativeObj.View.getViewById('flashLamp');
                            if(flashLamp){flashLamp.close()}
                            view = new plus.nativeObj.View('flashLamp',{top:'60%',left:'40%',height:'60px',width:'80px'});
                            var color = flag ? '#794fc4' : '#ffffff';
                            view.drawRichText('<font color="'+ color +'" style="font-size:24px;">\ue65b</font><br/><font color="'+ color +'" style="font-size:10px;">轻触照亮</font>', {top:'0px',left:'0%',width:'100%', height:'wrap_content',color:'FF0000'},{size:'24px',family:'Times New Roman',fontSrc:'/static/font/iconfont.ttf',align:'center'});
                            view.show();
                            view.addEventListener("click", onClick, false);
                        }

                        _Create();

                        function onClick(){
                            that.isFlash = !that.isFlash;
                            that.barcode.setFlash(that.isFlash);
                            _Create(that.isFlash)
                        }
                    },
                    // 手动输入
                    manualInput(){
                        var that = this;
                        var view;

                        function _Create(flag){
                            view = new plus.nativeObj.View('manualInput',{bottom:'10%',left:'15%',height:'60px',width:'80px'});
                            var color = flag ? '#794fc4' : '#ffffff';
                            view.drawRichText('<font color="'+ color +'" style="font-size:28px;">\ue62d</font><br/><font color="'+ color +'" style="font-size:10px;">手动输入</font>', {top:'0px',left:'0%',width:'100%', height:'wrap_content',color:'FF0000'},{size:'24px',family:'Times New Roman',fontSrc:'/static/font/iconfont.ttf',align:'center'});
                            view.show();
                            view.addEventListener("click", onClick, false);
                        }

                        _Create();

                        function onClick(){
                            that.isEdit = true;
                            plus.nativeObj.View.getViewById('flashLamp').close();
                            plus.nativeObj.View.getViewById('manualInput').close();
                            plus.nativeObj.View.getViewById('localAlbum').close();
                            plus.barcode.getBarcodeById('barcode').close();

                            setTimeout(()=>{
                                that.cScanInputH = 'c-scan-input-h';
                            },400)
                        }
                    },
                    // 本地相册
                    localAlbum(){
                        var that = this;
                        var view;
                        function _Create(flag){

                            view = new plus.nativeObj.View('localAlbum',{bottom:'10%',left:'60%',height:'60px',width:'80px'});
                            var color = flag ? '#794fc4' : '#ffffff';
                            view.drawRichText('<font color="'+ color +'" style="font-size:24px;">\ue7bf</font><br/><font color="'+ color +'" style="font-size:10px;">相册</font>', {top:'0px',left:'0%',width:'100%', height:'wrap_content',color:'FF0000'},{size:'24px',family:'Times New Roman',fontSrc:'/static/font/iconfont.ttf',align:'center'});
                            view.show();

                            view.addEventListener("click", onClick, false);
                        }

                        _Create();

                        function onClick(){
                            plus.gallery.pick(function(path){
                                plus.barcode.scan( path, function(type,result) {
                                        // uni.showToast({
                                        //     title: "("+type+")"+result ,
                                        //     icon: "none"
                                        // })
                                        that.returnValue(type,result);
                                        console.log("Scan success:("+type+")"+result);
                                    }, function(e){
                                        uni.showToast({
                                            title: JSON.stringify(e) ,
                                            icon: "none"
                                        })
                                        console.log("Scan failed: "+JSON.stringify(e));
                                    } );

                            })

                        }
                    },
                    closeView(){
                        var flashLamp = plus.nativeObj.View.getViewById('flashLamp');
                        var manualInput = plus.nativeObj.View.getViewById('manualInput');
                        var localAlbum = plus.nativeObj.View.getViewById('localAlbum');
                        var scanTitle = plus.nativeObj.View.getViewById('scanTitle');

                        if(flashLamp) flashLamp.close();
                        if(manualInput) manualInput.close();
                        if(localAlbum) localAlbum.close();
                        if(scanTitle) scanTitle.close();

                    },
                    closeScan(){
                        var b = plus.barcode.getBarcodeById('barcode');
                        if(b){b.close();}
                    },
                    // 切换扫描
                    switchScan(){
                        this.isEdit = false;
                        this.scan();
                        this.flashLamp();
                        this.manualInput();
                        this.localAlbum();
                        this.cScanInputH = '';
                    },
                    // 确认事件
                    handleConfirm(){

                        this.returnValue('edit',this.value);
                    },
                    // 返回值
                    returnValue(type,result){
                        var  pages = getCurrentPages();//当前页面栈
                        var prevPage = pages[pages.length - 2];//上一页面
                        var _url = prevPage.route.replace(/pages/g, "..")
                        var opt = {
                            type,result
                        }

                        // 返回返回结果
                        uni.$emit('scanUpdate',opt)

                        uni.navigateBack({
                            delta: pages.length - 2
                        });
                    }
	}
};
</script>

<style lang="scss">
.c-t-c {
	text-align: center;
}
.c-scan-input-box {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background-color: #333333;
}
.c-scan-input {
	height: 540rpx;
	width: 540rpx;
	background-color: #ffffff;
	margin: 384rpx auto 60rpx;
	margin-top: 384rpx;
	transition: height ease-out 0.35s;
}
.c-scan-text {
	display: block;
	color: #cccccc;
	padding: 16rpx 0 32rpx;
}
button.c-scan-btn {
	width: 218rpx;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
	margin: 50rpx;
	font-size: 28rpx;
	display: inline-block;
}
button.c-scan-btn-gray {
	background-color: #1f1f1f;
	color: #ffffff;
}
button.c-scan-btn-orange {
	background-color: #ff4000;
	color: #ffffff;
}

button.c-scan-btn[disabled] {
	background-color: #212121;
	color: #666666;
}
button.c-scan-btn-gray.button-hover[type='default'] {
	color: #eeeeee;
	background-color: #2f2f2f;
}
button.c-scan-btn-orange.button-hover[type='default'] {
	color: #eeeeee;
	background-color: #ff5c26;
}
.c-scan-input-h {
	height: 120rpx;
	transition: height ease-in 0.35s;
	line-height: 120rpx;
}
.c-scan-input-h .uni-input {
	height: 120rpx;
	line-height: 120rpx;
	caret-color: #794fc4;
	font-size: 36rpx;
}
</style>
